import axios from 'axios'
import React, { Component } from 'react'

export default class Search extends Component {
//     window.addEventListener("click", debounce(handle, 5000))

// function handle() {
//     console.log(Math.random());
// }
// function debounce(func, wait) {
//     var timer = null;
//     return function () {
//         if (timer !== null) {
//             clearTimeout(timer);
//         }
//         timer = setTimeout(func, wait);
//     }
// }
// 
handleSearchBtn = (func, waitTime)=>{
    var timer=null;
    console.log(this)
    return ()=>{
        if (timer!==null){
            clearTimeout(timer);
        }
        timer=setTimeout(func,waitTime)
    }
}
// 处理点击搜索获取信息
handleGetData =()=>{
    const { getData } = this
    console.log(this.props)
    const { updateState } = this.props
    // 发送请求前更新数据
    updateState({isFirst: false, isLoding: true })
    console.log(getData.value)
    // 发送请求，获取数据
    axios.get("https://api.github.com/search/users?q=" + getData.value).then(
        response => {
            console.log("成功", response.data.items)
            updateState({ userData: response.data.items, isFirst: false, isLoding: false })
        },
        // 错误时返回的数据
        error => {
            console.log("失败")
            updateState({ err: error.message, isFirst: false, isLoding: false })
        }
    )
}

render() {
    return (
        <section className="jumbotron">
            <h3 className="jumbotron-heading">Search Github Users</h3>
            <div>
                <input ref={c => this.getData = c} type="text" placeholder="enter the name you search" />&nbsp;
                <button onClick={this.handleSearchBtn(this.handleGetData,5000)}>Search</button>
            </div>
        </section>
    )
}
}
